<template>
  <div class="wrapper">
    <div id="my_bar_chart">

    </div>
  </div>
</template>

<script>
import { getCurMonthData } from '@/api/allApi'
import * as echarts from "echarts";
export default {
  data () {
    return {
      barChart: null,
      typeList: ['应走访数', '实走访数', '走访率'],
      option: {
        title: {
          text: '本月走访情况统计'
        },
        tooltip: {
          trigger: 'axis',
          // formatter: function (params) {
          //   console.log(params)
          //   let result = params[0].name + '<br>' // 获取横轴对应的数据作为提示信息的标题
          //   params.forEach(function (item) {
          //     result += item.marker + ' ' + item.seriesName + ': ' + item.value + (item.seriesName=='走访率'?'%':'') + ' <br>'  
          //   })
          //   return result
          // },
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['应走访数', '实走访数', '走访率']
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',

            axisLabel: {
              rotate: 45,
            },
            axisTick: { show: false },
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          // {
          //   name: 'Forest',
          //   type: 'bar',
          //   barGap: 0,
          //   label: labelOption,
          //   emphasis: {
          //     focus: 'series'
          //   },
          //   data: [320, 332, 301, 334, 390]
          // },

        ]
      }

    }
  },
  created () { },
  mounted () {
    this.barChart = echarts.init(document.getElementById("my_bar_chart"));
    this.initData()
  },
  methods: {

    async initData () {
      let xData = []
      let yData = []
      let labelOption = {
        show: true,
        position: 'top',
        formatter: function (params) {
          return params.seriesName == '走访率' ? `${params.value}%` : params.value
        },
        fontSize: 14,

      }
      const { data } = await getCurMonthData({ departmentid: 1 })
      console.log(data)
      if (data && data.length > 0) {
        xData = data.map(el => { return el.DepartmentName })
        yData = this.typeList.map(el => {
          return {
            name: el,
            type: 'bar',
            barGap: 0,
            label: labelOption,
            itemStyle: {
              // 设置柱子颜色
              color: el == '应走访数' ? '#5470C6' : el == '实走访数' ? '#92CC76' : '#ee6666'
            },
            data: data.map(e => { return el == '应走访数' ? e.ShouldPersonNum : el == '实走访数' ? e.AlreadyVisitNum : e.VisitRate })
          }
        })
        this.option.xAxis[0].data = xData
        this.option.series = yData
        this.barChart.setOption(this.option)

      }


    }
  },

}
</script>

<style>
#my_bar_chart {
  padding-top: 10px;
  width: 90%;
  height: 550px;
  border: 1px solid #ccc;
}
</style>